<template>
  <div class="main">
    <el-form :model="from" label-position="top" :rules="rules" ref="fromRef">
      <div class="back_img"></div>
      <div class="login">
        <div class="login_title">系统登录</div>
        <div class="login_input">
          <el-form-item prop="userName">
            <el-input
              :prefix-icon="Avatar"
              placeholder="请输入身份证号"
              v-model="from.userName"
            ></el-input>
          </el-form-item>
        </div>
        <div class="login_input">
          <el-form-item prop="passWord">
            <el-input
              :prefix-icon="Briefcase"
              placeholder="请输入密码"
              show-password
              v-model="from.passWord"
            ></el-input>
          </el-form-item>
        </div>
        <div class="login_button">
          <p @click="login">登录</p>
          <p @click="register">注册</p>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { Avatar, Briefcase } from "@element-plus/icons-vue";
import { get } from "../../utils/request";
import { ElMessage } from "element-plus";
export default {
  name: "LoginComponent",

  data() {
    return {
      loginState: sessionStorage.login,
      from:{},
    };
  },
  setup() {
    return { Avatar, Briefcase };
  },

  mounted() {},

  methods: {
    register() {
      this.$router.push({
        name: "register",
      });
    },
    login() {
          get("/checkLogin2", {
        userName: this.from.userName,
        password: this.from.passWord,
        userRole:"user"
      }).then((res) => {
        console.log(res.data)
        if (res.data != 0) {
          sessionStorage.login = true;
          sessionStorage.userName = this.userName;
          sessionStorage.telephone=res.data.telephone;
          sessionStorage.patient_id=res.data.userName;
          sessionStorage.real_name=res.data.realName;
          this.$router.push({
            name: "gua",
          }),
            ElMessage({
              message: "登录成功！",
              type: "success",
            });
        } else {
          this.$router.push({
            name: "login",
          }),
            ElMessage.error("身份证号，或密码错误！");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #259b9e;
  opacity: 0.9;
  /* background: #65768557; */
  padding: 30px;
  width: 18%;
  border: 1px solid #eee;
  border-radius: 20px;
}

.login_title {
  text-align: center;
  padding-bottom: 20px;
  font-size: 20px;
}
.login_input {
  margin-top: 15px;
}
.login_input:nth-child(2) {
  margin-bottom: 20px;
}
.login_input:nth-child(3) {
  margin-top: 20px;
}
.login_button {
  margin-top: 20px;
  display: flex;
}
.login_button p {
  color: #fff;
  font-size: 15px;
  display: block;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  width: 100%;
  border: 1px solid #ddd;
}
.login_button p:nth-child(1) {
  background: #409eff;
  margin-right: 10px;
}
.login_button p:nth-child(2) {
  background: #67c23a;
  margin-left: 10px;
}
</style>
